<template>
  <div class="auto">
    <form  class="form-horizontal">
      <p class="bg-info text-center" style="padding: 8px;">批量控阀</p>
      <validator name='v'>
      <div class="row" style="margin-top:10px;">
      <label for="f_pregas" class=" col-sm-2 control-label">请选择操作:</label>
      <div class="col-sm-2">
        <v-select id="f_paytype"
        v-model="model.f_valve_state"
        placeholder='请选择'
        :value.sync="model.f_valve_state"
        :options='valveState'
        close-on-select ></v-select>
      </div>
    </div>
      <div class="row" style="margin-top:10px;">
          <label for="f_change_cause" class=" col-sm-2 control-label">修改原因:</label>
          <div class="col-sm-8">
            <textarea class="form-control"   v-validate:f_reason='{required: true }'
             v-model="model.f_reason" rows="3" placeholder="请填写原因"></textarea>
        </div>
      </div>
      </validator>
    </form>
    <div style="text-align:right;height:auto;margin-top:70px;margin-right:50px;">
      <button class="btn btn-success" @click="confirm()" :disabled='!$v.valid'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
      <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
    </div>
  </div>
</template>
<script>
/**
*变更物联网表参数
*/
import * as Util from '../../../components/Util'
import AppData from '../../../stores/AppData'
export default {
  title: '阀门状态变更',
  data () {
    return {
      param: {
        f_filiale: Util.f.f_fengongsi,
        f_outlets: Util.f.f_parentname,
        type: '',
        initState: '',
        sendState: ''
      },
      model: {
        f_valve_state: []
      }
    }
  },
  props: ['data'],
  methods: {
    confirm () {
      this.bulkChange()
    },
    bulkChange () {
      this.param.type = this.model.f_valve_state[0]
      if (this.param.type === '开阀') {
        this.param.initState = '开'
        this.param.sendState = 1
      } else if (this.param.type === '关阀') {
        this.param.initState = '关'
        this.param.sendState = 0
      }
      this.$WebMeterService.bulkChangeValve(this.data, this.param)
      .then(
        (res) => {
          this.$dispatch('success', '阀门状态变更', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '阀门状态变更', this.data, error)
        }
      )
    },
    clean () {
      this.$info('取消操作')
      this.$dispatch('clean', '阀门状态变更')
    }
  },
  computed: {
    valveState () {
      return AppData.getParam('批量控阀')
    }
  }
}
</script>
